<template>
  <div>
    <el-container
      v-for="item of list"
      :key="item.id"
      v-if="item.state === tag"
      @click.native="goProjectDetail(item.id, item.name)"
      style="height: auto;width: 100%;border: 1px solid #eee;display: flex">
      <el-main style="width:50px;display: flex;height: 100%">
        <span>
            <svg class="icon projectIcon" aria-hidden="true">
              <use xlink:href="#icon-"></use>
            </svg>
          </span>
      </el-main>
      <el-main style="width: 60%;display: flex;height: 100%">
        <span>
            {{item.name}}
          </span>
      </el-main>
      <el-main style="width:30%;display: flex;height: 100%">
        <span>
            <svg class="icon fuzerenIcon" aria-hidden="true">
              <use xlink:href="#iconren"></use>
            </svg>
            {{item.managerName}}
          </span>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'projectListList',
  data () {
    return {
      list: [],
      tag: this.Run
    }
  },
  methods: {
    goProjectDetail (projectID, projectName) {
      sessionStorage.setItem('pid', projectID)
      sessionStorage.setItem('pname', projectName)
      this.$router.push('/projectDetail')
    },
    getProjectAll () {
      axios.get(this.url + '/project/all')
        .then(this.getProjectListSucc)
    },
    getProjectManager () {
      axios.get(this.url + '/project/manager/' + localStorage.getItem('id'))
        .then(this.getProjectListSucc)
    },
    getProjectMember () {
      axios.get(this.url + '/project/member/' + localStorage.getItem('id'))
        .then(this.getProjectListSucc)
    },
    getProjectListSucc (res) {
      if (res.status === 200) {
        res = res.data
        let projectList = this.list.concat(res)
        const arr = new Map()
        this.list = projectList.filter((projectList) => !arr.has(projectList.id) && arr.set(projectList.id, 1))
      }
    }
  },
  mounted () {
    let level = parseInt(localStorage.getItem('level'))
    if (level === this.PI) {
      this.getProjectManager()
    } else if (level === this.PR) {
      this.getProjectMember()
      this.getProjectManager()
    } else if (level === this.student) {
      this.getProjectMember()
    } else {
      this.getProjectAll()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .right
    float: right
  .iconMargin
    margin-right .3rem
  .textColor
    color #0D0D0D
  .iconColor
    color #88d4ff
  .taskIcon
    color #16b0ff
  .row
    margin-top .6rem
    margin-left .5rem
    margin-bottom .6rem
  .delIcon
    float right
    margin-right .5rem
  .fuzerenIcon
    margin-right .3rem
  .projectIcon
    font-size 28px
</style>
